import React from "react"
import './HOC.css'
// function HOC (WrapperdComponent) {
//       return (
//         <div className="HOCExplain">
//           <div className='header'>
//             <span>开启高阶组件学习</span>
//           </div>
//           <div className='container'>
//             <WrapperdComponent {...newProps} />
//           </div>
//           <div className="footer">学无止境</div>
//         </div>
//       )
// }

const modifyPropsHoc = (WrapperdComponent) => class NewComponent extends WrapperdComponent {
  render() {
    const element = super.render()
    const newStyle = {
      color: element.type === 'div' ? 'red' : 'greed'
    }
    const newProps = { ...this.props, style: newStyle }

    return React.cloneElement(element, newProps, element.props.children)
  }
}


export default modifyPropsHoc